<template>
    <el-form-item
        :label="item.label && !item.question ? item.label : ''"
        :prop="item.prop"
    >
        <span slot="label" v-if="item.question">
            <el-tooltip :content="item.question" placement="top">
                <i class="el-icon-question"></i>
            </el-tooltip>
            {{ item.label }}
        </span>
        <el-input
            :type="item.type"
            :placeholder="item.placeholder"
            :disabled="item.disabled"
            :clearable="item.clearable"
            :show-password="item.showPassword"
            :autosize="item.autosize"
            :rows="item.rows"
            :maxlength="item.maxlength"
            :minlength="item.minlength"
            :size="item.size | setSize(item.size)"
            :autocomplete="item.autocomplete"
            :name="item.name"
            :readonly="item.readonly"
            :resize="item.resize"
            :autofocus="item.resize"
            :show-word-limit="item.showWordLimit"
            :class="item.class"
            v-model="formData[item.prop]"
            @blur="onInputBlur"
            @focus="onInputFocus"
            @change="onInputChange"
            @input="onInput"
            @clear="onInputClear"
        >
            <svg-icon
                v-if="item.prefixIcon"
                slot="prefix"
                :icon-class="item.prefixIcon"
                :class="item.prefixIcon"
            />
            <svg-icon
                v-if="item.suffixIcon"
                slot="suffix"
                :icon-class="item.suffixIcon"
                :class="item.suffixIcon"
            />
            <template v-if="item.prependContent" slot="prepend">{{
                item.prependContent
            }}</template>
            <template v-if="item.appendContent" slot="append">{{
                item.appendContent
            }}</template>
            <el-button
                v-if="item.prependButton"
                slot="prepend"
                @click.stop="prependButtonClick"
            >
                <svg-icon
                    v-if="item.prependButton.icon"
                    :icon-class="item.prependButton.icon"
                    :class="item.prependButton.icon"
                />
                <span v-if="item.prependButton.label">{{
                    item.prependButton.label
                }}</span>
            </el-button>
            <el-button
                v-if="item.appendButton"
                slot="append"
                @click.stop="appendButtonClick"
            >
                <svg-icon
                    v-if="item.appendButton.icon"
                    :icon-class="item.appendButton.icon"
                    :class="item.appendButton.icon"
                />
                <span v-if="item.appendButton.label"
                    >{{ item.appendButton.label }}
                </span>
            </el-button>
            <el-select
                v-if="item.prependSelectOptions"
                v-model="prependSelectValue"
                slot="prepend"
                placeholder="请选择"
                @change="prependSelectChange"
            >
                <el-option
                    v-for="(childItem, index) in item.prependSelectOptions"
                    :key="index"
                    :label="childItem.label"
                    :value="childItem.label"
                />
            </el-select>
            <el-select
                v-if="item.appendSelectOptions"
                v-model="appendSelectValue"
                slot="append"
                placeholder="请选择"
                @change="appendSelectChange"
            >
                <el-option
                    v-for="(childItem, index) in item.appendSelectOptions"
                    :key="index"
                    :label="childItem.label"
                    :value="childItem.label"
                />
            </el-select>
        </el-input>
    </el-form-item>
</template>
<script>
import mixin from '../mixins/index.js'
export default {
    name: 'df-input',
    mixins: [mixin],
    props: {
        item: {
            type: Object,
            default() {
                return {
                    /**
                     * 输入框类型
                     * @type String
                     * @value text\password\textarea
                     */

                    type: 'text',
                    /**
                     * 输入框提示语
                     * @type String
                     * @value '请输入内容'
                     */
                    placeholder: '请输入内容',
                    /**
                     * 输入框是否禁用
                     * @type Bolean
                     * @value false/true
                     */
                    disabled: false,
                    /**
                     * 输入框是否可清空
                     * @type Bolean
                     * @value false/true
                     */
                    clearable: false,
                    /**
                     * 输入框是否是密码框
                     * @type Bolean
                     * @value false/true
                     * @format 当type == password 时添加此配置
                     */
                    showPassword: false,
                    /**
                     * 输入框原生属性，最大输入长度
                     * @type Bolean
                     * @value Number
                     */
                    maxlength: '',
                    /**
                     * 输入框原生属性，最小输入长度
                     * @type Bolean
                     * @value Number
                     */
                    minlength: '',
                    /**
                     * 输入框是否显示字数
                     * @type Bolean
                     * @value false/true
                     */
                    showWordLimit: false,
                    /**
                     * 输入框头部图标
                     * @type String
                     * @value ' - '
                     */
                    prefixIcon: '',
                    /**
                     * 输入框尾部图标
                     * @type String
                     * @value ' - '
                     */
                    suffixIcon: '',
                    /**
                     * 输入框行数
                     * @type Number
                     * @value 2
                     * @format 当type == textarea 时添加此配置
                     */
                    rows: 2,
                    /**
                     * 输入框尺寸
                     * @type String
                     * @value medium / small / mini
                     * @format 当type == textarea 时添加此配置
                     */
                    size: 'medium',
                    /**
                     * 输入框自适应内容高度
                     * @type Object | Boolean
                     * @value true / false / { minRows: 2, maxRows: 6 }
                     * @format 当type == textarea 时添加此配置
                     */
                    autosize: false,
                    /**
                     * 原生属性，自动补全
                     * @type String
                     * @value on, off
                     */
                    autocomplete: 'off',
                    /**
                     * 原生属性
                     * @type String
                     * @value ''
                     */
                    name: '',
                    /**
                     * 原生属性，是否只读
                     * @type Bolean
                     * @value false/true
                     */
                    readonly: false,
                    /**
                     * 控制是否能被用户缩放
                     * @type string
                     * @value none, both, horizontal, vertical
                     */
                    resize: 'none',
                    /**
                     * 原生属性，自动获取焦点
                     * @type Boolean
                     * @value false/true
                     */
                    autofocus: 'false',
                    /**
                     * 输入框头部文字
                     * @type String
                     * @value ' - '
                     * @format 当type == text 时此配置生效
                     */
                    prependContent: '',
                    /**
                     * 输入框尾部文字
                     * @type String
                     * @value ' - '
                     * @format 当type == text 时此配置生效
                     */
                    appendContent: '',
                    /**
                     * 输入框头部按钮
                     * @type Boolean | Object
                     * @value ' - '
                     * @format 当type == text 时此配置生效
                     * @remark prependButton:{icon:'图标',label:'文字'}
                     */
                    prependButton: false,
                    /**
                     * 输入框尾部按钮
                     * @type Boolean | Object
                     * @value ' - '
                     * @format 当type == text 时此配置生效
                     * @remark appendButton:{icon:'图标',label:'文字'}
                     */
                    appendButton: false,
                    /**
                     * 自定义输入框类名
                     * @type string
                     * @value 'red'
                     */
                    class: '',
                    /**
                     * 输入框关联的label文字
                     * @type String
                     * @value ''
                     */
                    label: ''
                }
            }
        },
        /**
         * 提交的表单项
         * @type Object
         */
        formData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            prependSelectValue: '',
            appendSelectValue: ''
        }
    },
    methods: {
        /**
         * 在 Input 失去焦点时触发
         * @param event: Event
         *
         */
        onInputBlur(event) {
            this.dispatch('baseForm', 'onInputBlur', {
                event,
                prop: this.item.prop
            })
        },
        /**
         * 在 Input 获得焦点时触发
         * @param event: Event
         *
         */
        onInputFocus(event) {
            this.dispatch('baseForm', 'onInputFocus', {
                event,
                prop: this.item.prop
            })
        },
        /**
         * 仅在输入框失去焦点或用户按下回车时触发
         * @param 输入框的值 string | number
         *
         */
        onInputChange(data) {
            this.dispatch('baseForm', 'onInputChange', {
                data,
                prop: this.item.prop
            })
        },
        /**
         * 在 Input 值改变时触发
         * @param 输入框的值 string | number
         *
         */
        onInput(data) {
            this.dispatch('baseForm', 'onInput', { data, prop: this.item.prop })
        },
        /**
         * 在点击由 clearable 属性生成的清空按钮时触发
         * @param 无参数
         *
         */
        onInputClear() {
            this.dispatch('baseForm', 'onInputClear', { prop: this.item.prop })
        },
        /**
         * input输入框前的按钮被触发
         */
        prependButtonClick() {
            this.dispatch('baseForm', 'onInputPrependButtonClick', {
                prop: this.item.prop
            })
        },
        /**
         * input输入框后的按钮被触发
         */
        appendButtonClick() {
            this.dispatch('baseForm', 'onInputAppendButtonClick', {
                prop: this.item.prop
            })
        },
        /**
         * 输入框前的下拉变化
         */
        prependSelectChange() {
            this.dispatch('baseForm', 'onInputPrependSelectChange', {
                prop: this.item.prop,
                value: this.prependSelectValue
            })
        },
        /**
         * 输入框后的下拉变化
         */
        appendSelectChange() {
            this.dispatch('baseForm', 'onInputAppendSelectChange', {
                prop: this.item.prop,
                value: this.appendSelectValue
            })
        }
    }
}
</script>
